<template>
  <el-main class="applicationForm" style="padding-top: 7rem">
    <el-form ref="form" :model="form" label-width="3rem">
      <el-row type="flex" justify="center" align="middle">
<!--        <el-table>-->
<!--          -->
<!--        </el-table>-->
        <table>
          <div style="padding-top: 1rem">
            <tr>
              <td>
                <img id="pic" src="@/assets/product/1670742331711.jpg"/>
              </td>
              <tr>
                <a>¥10 一次性口罩 恒明医疗  </a>
                <a href="http://localhost:8082/e_commerce/mouth-muffle.html">购买</a>
<!--            <a href="http://honglitech:8082/e_commerce/mouth-muffle.html">购买</a>-->
              </tr>

            <tr>
              <td>
                <img id="pic" src="@/assets/product/img_7.png"/>
              </td>
              <tr>
                <a>¥42 感冒疏风颗粒  云南康恩贝希陶 </a>
                <a href="http://localhost:8082/e_commerce/coldMedi.html">购买</a>
<!--            <a href="http://honglitech:8082/e_commerce/coldMedi.html">购买</a>-->
              </tr>
            </tr>
<!--            <tr>-->
<!--              <td>-->
<!--                <img id="pic" src="@/assets/virus/15.jpeg"/>-->
<!--              </td>-->
<!--            <tr>-->
<!--              <a>¥100 防疫药物  **医药 </a>-->
<!--              <a href="http://localhost:88/easypatent/index#/rcs/printJob">购买</a>-->
<!--            </tr>-->
<!--            </tr>-->



<!--            <tr>-->
<!--              <td>-->
<!--            <tr>-->
<!--&lt;!&ndash;              <iframe&ndash;&gt;-->
<!--&lt;!&ndash;                id="iframeContain0"&ndash;&gt;-->
<!--&lt;!&ndash;                name="iframeContain"&ndash;&gt;-->
<!--&lt;!&ndash;                seamless&ndash;&gt;-->
<!--&lt;!&ndash;                scrolling="yes"&ndash;&gt;-->
<!--&lt;!&ndash;                :src="iframeURL"&ndash;&gt;-->
<!--&lt;!&ndash;              >&ndash;&gt;-->
<!--&lt;!&ndash;                您当前的浏览器不支持页面上的功能，请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面&ndash;&gt;-->
<!--&lt;!&ndash;              </iframe>&ndash;&gt;-->
<!--            <img id="pic" src="@/assets/virus/15.jpeg"style="width: 25rem; height: 20rem;"/>-->
<!--            </tr>-->
<!--            <tr>-->
<!--              <a>¥2000/年 </a>-->
<!--              <a href="http://172.20.10.5:88/easypatent/index#/rcs/printJob">购买自助申请平台</a>-->
<!--            </tr>-->
<!--            </td>-->
<!--            <td style="padding-left: 3rem">-->
<!--              <tr>-->
<!--&lt;!&ndash;                <iframe&ndash;&gt;-->
<!--&lt;!&ndash;                  id="iframeContain0"&ndash;&gt;-->
<!--&lt;!&ndash;                  name="iframeContain"&ndash;&gt;-->
<!--&lt;!&ndash;                  seamless&ndash;&gt;-->
<!--&lt;!&ndash;                  scrolling="yes"&ndash;&gt;-->
<!--&lt;!&ndash;                  :src="iframeURL"&ndash;&gt;-->
<!--&lt;!&ndash;                >&ndash;&gt;-->
<!--&lt;!&ndash;                  您当前的浏览器不支持页面上的功能，请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面&ndash;&gt;-->
<!--&lt;!&ndash;                </iframe>&ndash;&gt;-->
<!--                <img id="pic" src="@/assets/virus/15.jpeg"style="width: 25rem; height: 20rem;"/>-->
<!--              </tr>-->
<!--              <tr>-->
<!--                <a>¥2000/年 </a>-->
<!--                <a href="http://172.20.10.5:88/easypatent/index#/rcs/printJob">购买自助申请平台</a>-->
<!--              </tr>-->
<!--            </td>-->
<!--            </tr>-->
<!--          </div>-->

<!--          <div style="padding-top: 3rem">-->
<!--            <tr>-->
<!--              <td>-->
<!--            <tr>-->
<!--&lt;!&ndash;              <iframe&ndash;&gt;-->
<!--&lt;!&ndash;                id="iframeContain0"&ndash;&gt;-->
<!--&lt;!&ndash;                name="iframeContain"&ndash;&gt;-->
<!--&lt;!&ndash;                seamless&ndash;&gt;-->
<!--&lt;!&ndash;                scrolling="yes"&ndash;&gt;-->
<!--&lt;!&ndash;                :src="iframeURL"&ndash;&gt;-->
<!--&lt;!&ndash;              >&ndash;&gt;-->
<!--&lt;!&ndash;                您当前的浏览器不支持页面上的功能，请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面&ndash;&gt;-->
<!--&lt;!&ndash;              </iframe>&ndash;&gt;-->
<!--            <img id="pic" src="@/assets/virus/15.jpeg"style="width: 25rem; height: 20rem;"/>-->
<!--            </tr>-->
<!--            <tr>-->
<!--              <a>¥5000 发明  知识产权事务所</a>-->
<!--              <a href="http://localhost:88/easypatent/index#/rcs/printJob">购买代理服务</a>-->
<!--            </tr>-->
<!--            </td>-->
<!--            <td style="padding-left: 3rem">-->
<!--              <tr>-->
<!--&lt;!&ndash;                <iframe&ndash;&gt;-->
<!--&lt;!&ndash;                  id="iframeContain0"&ndash;&gt;-->
<!--&lt;!&ndash;                  name="iframeContain"&ndash;&gt;-->
<!--&lt;!&ndash;                  seamless&ndash;&gt;-->
<!--&lt;!&ndash;                  scrolling="yes"&ndash;&gt;-->
<!--&lt;!&ndash;                  :src="iframeURL4"&ndash;&gt;-->
<!--&lt;!&ndash;                >&ndash;&gt;-->
<!--&lt;!&ndash;                  您当前的浏览器不支持页面上的功能，请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面&ndash;&gt;-->
<!--&lt;!&ndash;                </iframe>&ndash;&gt;-->
<!--                <img id="pic" src="@/assets/virus/15.jpeg"style="width: 25rem; height: 20rem;"/>-->
<!--              </tr>-->
<!--              <tr>-->
<!--                <a>¥2700 实用新型  知识产权事务所</a>-->
<!--                <a href="http://localhost:88/easypatent/index#/rcs/printJob">购买代理服务</a>-->
<!--              </tr>-->
<!--            </td>-->
<!--            </tr>-->
          </div>
        </table>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="品名"><!-- form-item用于显示关联的文件 -->
            <el-input v-model="form.name" style="width: 150%"></el-input>
          </el-form-item>
          <el-form-item label="数量"><!-- form-item用于显示关联的文件 -->
            <el-input v-model="form.amount" style="width: 150%"></el-input>
          </el-form-item>
          <el-form-item label="金额"><!-- form-item用于显示关联的文件 -->
            <el-input v-model="form.price" style="width: 150%"></el-input>
          </el-form-item>
          <el-form-item label="需求时间"><!-- form-item用于显示关联的文件 -->
            <el-input v-model="form.time" style="width: 150%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="地址"><!-- form-item用于显示关联的文件 -->
            <el-input v-model="form.address" style="width: 150%"></el-input>
          </el-form-item>
          <el-form-item label="联系方式"><!-- form-item用于显示关联的文件 -->
            <el-input v-model="form.contact" style="width: 150%"></el-input>
          </el-form-item>
          <el-form-item label="其他"><!-- form-item用于显示关联的文件 -->
            <el-input v-model="form.other" style="width: 150%"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onClear">清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-row style="font-size:1.2rem;padding-top: 3rem" type="flex" justify="center" align="middle">
          <span> 待配送清单 </span>
          <!--      <dv-decoration-3 style="width:5rem;height:1.25rem;"/>-->
        </el-row>
        <el-row class="supplies-echar">
          <dv-scroll-board :config="config"/>
        </el-row>
      </el-row>
    </el-form>
  </el-main>

</template>

<script>
export default {
  name: "MaterialApplication",
  data() {
    return {
      options: {},
      form: {
        name: '',
        amount:'',
        price:'',
        time:'',
        address:'',
        contact:'',
        other:''
      },
      config: {
        header: ['地名', '物资名称', '数量'],
        data: [
          ['上海隔离点1', '蔬菜', '10千斤'],
          ['杭州仓溢绿苑小区', '生活用品', '100件'],
          ['上海隔离点1', '海鲜', '45吨'],
          ['上海隔离点2', '蔬菜', '15吨'],
          ['上海隔离点3', '农产品', '16标箱'],
          ['杭州富阳', '蔬菜', '10吨'],
          ['杭州富阳', '蔬菜', '10吨'],
          ['杭州富阳', '蔬菜', '10吨'],
          ['上海隔离点1', '海鲜', '45吨'],
          ['上海隔离点1', '蔬菜', '15吨'],
        ],
        rowNum: 8, //表格行数
        headerHeight: 80,
        headerBGC: '#113af5', //表头
        oddRowBGC: '#880505', //奇数行
        evenRowBGC: 'rgb(188,239,35)', //偶数行
        index: false,
        columnWidth: [150],
        align: ['center']
      },
      timer: null
    }
  },
  watch: {
    config: {
      handler (newData) {
        this.options = {
          calculate: true,
          series: [
            {
              data: newData.data
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getData();
  },
  methods: {
    onSubmit() {
      console.log('submit!');
      console.log(JSON.stringify(this.form))
      this.$http.post('MaterialApplication/save',
            {
              // name:this.name,//错误的取值
              name:this.form.name,
              amount:this.form.amount,
              price:this.form.price,
              time:this.form.time,
              other:this.form.other,
              address:this.form.address,
              contact:this.form.contact
            },
        {emulateJSON: true}
      ).then((response)=>{
          const code = response.data.code;
          if (code !== 200) {
            alert('申请保存失败');
          }else{
            alert('保存成功');
            location. reload()
            this.$router.go(0)
          }
        },
      ).catch(function (error) {
        console.log(error);
      });
    },
    onClear(){
      location. reload()
      this.$router.go(0)
    },
    getData () {
      var _this = this
      this.$http.get('MaterialApplication/getList').then(response => {
        var data = response.data
        if (data.code == 200) {
          var values = new Array()
          for (var i = 0; i < data.data.length; i++) {
            values[i] = [data.data[i].address, data.data[i].name, data.data[i].amount]
          }
          _this.config = {
            header: ['地名', '物资名称', '数量'],
            data: values,
            rowNum: 8, //表格行数
            headerHeight: 35,
            headerBGC: '#171057', //表头
            oddRowBGC: '#113af5', //奇数行
            evenRowBGC: '#2895b9', //偶数行
            index: true,
            columnWidth: [50],
            align: ['center']
          }
        } else {
          console.log('失败')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.applicationForm {
  align-content: center;
  padding-left: 0.1rem;
}
.el-form-item__content{
  width: 5rem;
}
#pic{
  width: 25rem; height: 15rem;
}


</style>
